// 错题本

<template>
  <section class="content">
    <Header :title="page === 'failed' ? '错题本' : '试题收藏'">
      <div slot="left" @click="goBack" style="width: 100%;height: 100%;text-align: center;">
        <i class="iconfont icon-arrow-left" style="font-size: 22px"></i>
      </div>
    </Header>
    <div class="main">
      <!-- <mescroll-vue class="mescroll_content" ref="mescroll" :down="mescrollDown" @init="mescrollInit"> -->
      <ul>
        <li class="item_box">
          <div class="item">
            <div class="left">
              <p class="name">单选题</p>
              <p class="num">
                已收藏题目:
                <b style="color: red;padding: 0 3px;">{{data.single}}</b>道
              </p>
            </div>
            <div class="right">
              <!-- <div class="btn blue" @click="goQuestion">重新做题</div> -->
              <div class="btn orange" @click="goHisQuestion(1)">查看解析</div>
            </div>
          </div>
        </li>
        <li class="item_box">
          <div class="item">
            <div class="left">
              <p class="name">多选题</p>
              <p class="num">
                已收藏题目:
                <b style="color: red;padding: 0 3px;">{{data.multipe}}</b>道
              </p>
            </div>
            <div class="right">
              <!-- <div class="btn blue" @click="goQuestion">重新做题</div> -->
              <div class="btn orange" @click="goHisQuestion(2)">查看解析</div>
            </div>
          </div>
        </li>
      </ul>
      <!-- </mescroll-vue> -->
    </div>
  </section>
</template>
<script>
import Header from "../../components/Header/Header";
import MescrollVue from "mescroll.js/mescroll.vue";
import { reqFaileCount, reqCollectCount } from "../../api/index.js";
let reqData = {
  failed: reqFaileCount,
  collect: reqCollectCount
};
export default {
  data() {
    return {
      page: '',
      data: {}
    };
  },
  mounted() {
    this.page = this.$router.history.current.query.page;
    this.initData();
  },
  methods: {
    async initData() {
      let result = await reqData[this.page]({type: 'QUESTION'});
      if (result.code === 1) {
        this.data = result.data;
      } else {
        this.$vux.toast.show(`获取统计数据失败${result.msg}`);
      }
    },
    goHisQuestion(data) {
      if(data===1 && !this.data.single){
        this.$vux.toast.show(`没有数据!`);
        return false;
      }
      if(data===2 && !this.data.multipe){
        this.$vux.toast.show(`没有数据!`);
        return false;
      }
      this.$router.push({ path: "/hisQuestion", query: { type: data, page: this.page } });
    },

    goBack() {
      if (window.history.length <= 1) {
        this.$router.push({ path: "/" });
        return false;
      } else {
        this.$router.go(-1);
      }
    }
  },
  components: { Header, MescrollVue }
};
</script>
<style lang="less" scoped>
@import "../../util/theme.less";

.content {
  .be-full();

  .main {
    width: 100%;
    height: calc(~"100% - 46px");
    position: relative;
    overflow: auto;

    ul {
      width: 100%;

      .item_box {
        padding: 10px;
        background: @white;
        position: relative;

        .item {
          width: 100%;
          border: 1px solid @border-base;
          border-radius: 5px;
          padding: 10px;
          .mix-flex-center();

          .left {
            flex: 1;

            .name {
              font-size: 16px;
              margin-bottom: 6px;
            }

            .num {
              font-size: 12px;
              color: @font-secondary;
            }
          }

          .right {
            flex: 1;
            position: relative;
            .mix-flex-center();
            justify-content: flex-end;
            .btn {
              font-size: 12px;
              color: @white;
              border-radius: 5px;
              padding: 2px 5px;
              width: 40%;
              .mix-flex-center();
            }

            .blue {
              background: @primary;
              margin-right: 10px;
            }

            .orange {
              background: orange;
            }
          }
        }
      }
    }
  }
}
</style>
